<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/main-body.css">
    <style>
        a {
            text-decoration: none;
        }
        
        .first-recommend a {
            color: #999;
        }
        
        .attention-content {
            display: flex;
            height: 350px;
            padding: 40px 0;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            /* background-color: pink; */
        }
        
        .attention-content img {
            width: 240px;
            height: 240px;
        }
        
        .attention-content span {
            margin-top: 20px;
            color: #55555a;
        }
        
        .attention-content button {
            width: 180px;
            height: 40px;
            margin-top: 17px;
            border-radius: 8px;
            border: 0;
            cursor: pointer;
            background-color: #fff200;
        }
        
        .attention-content button a {
            display: inline-block;
            width: 100%;
        }
    </style>
</head>

<body>
    <!-- 主体头部导航 -->
    <div class="main-body">
        <div class="w">
            <div class="main-title">
                <span class="recommend">关注</span>
                <span>推荐</span>
                <span class="first-recommend"><a href="section.html">首推</a></span>
                <span>榜单</span>
            </div>
            <img src="upload/main-r.jfif" alt="">
        </div>
    </div>
    <!-- 关注的内容 -->
    <div class="attention">
        <div class="attention-content">
            <img src="upload/attention.png" alt="">
            <span>登录之后可以查看关注的酷友们发布的内容</span>
            <button><a href="register.html">去登录</a></button>
        </div>
    </div>
    <script>
        window.addEventListener('load', function() {
            var first_recommend = document.querySelector('.first-recommend');
            var first_a = first_recommend.querySelector('a');
            first_a.addEventListener('mouseenter', function() {
                first_a.style.color = '#222';
            })
            first_a.addEventListener('mouseleave', function() {
                first_a.style.color = '#999';
            })
        })
    </script>
</body>

</html>